<template>
  <div>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
        <article class="tile is-child box">
          <h1 class="title">Info</h1>
          <p class="subtitle">{{!personsalInfoEdit ? this.$t("message.subtitleOfInfoWithNotEdit") : this.$t("message.subtitleOfInfoWithEditing")}}</p>
          <div class="block">
            <div class="control" v-bind:class="{ 'is-disabled': !personsalInfoEdit }">
              <label class="label">{{$t("message.name")}}</label>
              <p class="control">
                <input v-model="name" class="input" type="text" placeholder="Text input">
              </p>
              <p class="control">
                <span class="select">
                  <select v-model="gender">
                    <option>保密</option>
                    <option>男生</option>
                    <option>女生</option>
                  </select>
                </span>
              </p>
              <label class="label">{{$t("message.message")}}</label>
              <p class="control">
                <textarea v-model="message" class="textarea" placeholder="Textarea"></textarea>
              </p>
              <label class="lable">{{$t("message.date")}}</label>
              <p class="control">
                <datepicker v-model="birthday" :inputClass="{ test: true }" :config="{ wrap: true ,locale: l10n }" readonly>
                  <a class="button" data-toggle>
                    <i class="fa fa-calendar"></i>
                  </a>
                  <a class="button" data-clear>
                    <i class="fa fa-close"></i>
                  </a>
                </datepicker>
              </p>
            </div>
            <p class="control">
                <button class="button is-primary" @click="personalInfoToggleEdit(),submit()" v-show="personsalInfoEdit">{{$t("message.submit")}}</button>
                <button class="button is-info" @click="personalInfoToggleEdit" v-show="!personsalInfoEdit">{{$t("message.edit")}}</button>
            </p>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Datepicker from 'vue-bulma-datepicker'
import Vue from 'vue'
import Message from 'vue-bulma-message'
const MessageComponent = Vue.extend(Message)
const openMessage = (propsData = {
  title: '',
  message: '',
  type: '',
  direction: '',
  duration: 1000,
  container: '.messages'
}) => {
  return new MessageComponent({
    el: document.createElement('div'),
    propsData
  })
}
export default {
  components: {
    Datepicker
  },
  methods: {
    ...mapActions(['personalInfoToggleEdit']),
    submit: function () {
      const playload = this.deepClone(this.$store.getters.user)
      playload.userInfo = this.deepClone(this.$store.getters.personalInfo)
      this.$store.dispatch('setUser', playload).then(() => {
        openMessage({
          message: '修改成功',
          type: 'success',
          duration: 1000,
          showCloseButton: true
        })
      })
    },
    deepClone: function (obj) {
      const proto = Object.getPrototypeOf(obj)
      return Object.assign({}, Object.create(proto), obj)
    }
  },
  computed: {
    ...mapGetters(['personsalInfoEdit']),
    name: {
      get () {
        return this.$store.state.app.personal.info.name
      },
      set (value) {
        this.$store.dispatch('update', {
          key: 'name',
          value: value
        })
      }
    },
    gender: {
      get () {
        return this.$store.state.app.personal.info.gender !== '0' ? (this.$store.state.app.personal.info.gender === 1 ? '男生' : '女生') : '保密'
      },
      set (value) {
        this.$store.dispatch('update', {
          key: 'gender',
          value: value !== '保密' ? (value === '男生' ? 1 : 2) : 0
        })
      }
    },
    message: {
      get () {
        return this.$store.state.app.personal.info.message
      },
      set (value) {
        this.$store.dispatch('update', {
          key: 'message',
          value: value
        })
      }
    },
    birthday: {
      get () {
        return this.$store.state.app.personal.info.birthday.val === undefined ? this.$store.state.app.personal.info.birthday : this.$store.state.app.personal.info.birthday.val
      },
      set (value) {
        this.$store.dispatch('update', {
          key: 'birthday',
          value: value
        })
      }
    },
    l10n () {
      return {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
          longhand: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        },
        months: {
          shorthand: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          longhand: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
